import Vue from 'vue';
import { Button, Message, DatePicker, Icon, Pagination, FormItem, Dialog, Form, Input } from 'element-ui';

// 1. 注入全局样式（防止重复注入）
const injectStyle = () => {
  const styleId = 'el-message-center-style';
  if (!document.getElementById(styleId)) {
    const style = document.createElement('style');
    style.id = styleId;
    style.innerHTML = `
      .el-message-center {
        top: 19.5% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        background-color: #fff !important;
        border-color: #ff4d4f !important;
      }
      .el-message.el-message-center .el-message__content {
        color: #333 !important;
      }
      .el-icon-close {
        color: #999 !important;
      }
    `;
    document.head.appendChild(style);
  }
};

// 2. 创建居中消息方法
const centerMessage = (options) => {
  injectStyle();
  return Message({
    showClose: true,
    customClass: 'el-message-center',
    ...options
  });
};

// 3. 挂载到Vue原型
Vue.prototype.$centerMessage = centerMessage; // 覆盖默认为居中版本
Vue.prototype.$message = Message; // 保留原始消息

// 4. 注册Button组件
Vue.use(Button);
Vue.use(DatePicker)
Vue.use(Icon)
Vue.use(Pagination)
Vue.use(FormItem)
Vue.use(Dialog)
Vue.use(Form)
Vue.use(Input)
